<template>
  <div>
    <div class="modal">
      <div class="modal-bg" @click="closeThisModal"></div>
      <div class="Htran">
        <!--<div class="rele-titles"><span @click="">X</span></div>-->
        <div class="rele-titles"><img @click="closeThisModal" src="../assets/img/tub.png" alt="">片区修改</div>
        <div class="li-p">
          <div class="Htran-li">
            <!--<div class="Htran-b-li">-->
              <!--<div class="Htran-b-name">-->
                <!--省份-->
              <!--</div>-->
              <!--<div class="Htran-b-input">-->
                <!--<el-select @change="getCityList" v-model="proData" placeholder="请选择">-->
                  <!--<el-option-->
                    <!--v-for="item in proList"-->
                    <!--:key="item.CODE"-->
                    <!--:label="item.region_name_c"-->
                    <!--:value="item.CODE">-->
                  <!--</el-option>-->
                <!--</el-select>-->
              <!--</div>-->
            <!--</div>-->
            <!--<div class="Htran-b-li">-->
              <!--<div class="Htran-b-name">-->
                <!--城市-->
              <!--</div>-->
              <!--<div class="Htran-b-input">-->
                <!--<el-select @change="getAreaList" v-model="cityData" placeholder="请选择">-->
                  <!--<el-option-->
                    <!--v-for="item in cityList"-->
                    <!--:key="item.CODE"-->
                    <!--:label="item.region_name_c"-->
                    <!--:value="item.CODE">-->
                  <!--</el-option>-->
                <!--</el-select>-->
              <!--</div>-->
            <!--</div>-->
            <!--<div class="Htran-b-li">-->
              <!--<div class="Htran-b-name">-->
                <!--县/区-->
              <!--</div>-->
              <!--<div class="Htran-b-input">-->
                <!--<el-select v-model="upper_region" placeholder="请选择">-->
                  <!--<el-option-->
                    <!--v-for="item in areaList"-->
                    <!--:key="item.CODE"-->
                    <!--:label="item.region_name_c"-->
                    <!--:value="item.CODE">-->
                  <!--</el-option>-->
                <!--</el-select>-->
              <!--</div>-->
            <!--</div>-->
            <div class="Htran-b-li">
              <div class="Htran-b-name">
                片区名称
              </div>
              <div class="Htran-b-input">
                <el-input v-model="title" placeholder="请输入内容"></el-input>
              </div>
            </div>
            <div class="Htran-b-li">
              <div class="Htran-b-name">
                排序号
              </div>
              <div class="Htran-b-input">
                <el-input v-model="sort" placeholder="请输入内容"></el-input>
              </div>
            </div>
          </div>
          <div class="primary_link">
            <el-button @click="onSubmit" type="primary" style="margin-top: 80px;"><span>保存</span></el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
  export default {
    props: {
      HtranClose: {
        type: Function
      },
      SetHourList: {
        type: Function
      },
      TFollowClose: {
        type: Function
      },
      LDmodal: {
        type: Function
      }
    },
    data() {
      return {
        // proList: [],//省列表
        // proData: '',
        // cityList: [],//城市列表
        // cityData: '',
        // areaList: [],//县区列表
        // upper_region: '',
        title: '',//片区名字
        sort: '',//排序

      }
    },

    methods: {
      //父组件调用方法
      parentMethod(){
        let that = this;
        // that.getProList();
        // that.getCityList();
        // that.getAreaList();
        that.getAreaData();
      },
      onSubmit() {
        let that = this;
        this.$http.post('/newapi/Area/modifyAreaStreet', {
            upper_region: that.upper_region,
            title: that.title,
            sort: that.sort,
          id:that.$store.state.areaId
          }
        ).then(function(res) {
          if (res.data.status === 200) {
            that.closeThisModal();
            that.SetHourList();
            that.$store.state.messageString = res.data.message;
            that.LDmodal();
          } else {
            that.$store.state.messageString = res.data.message;
            that.LDmodal();
          }
        }).catch(function(err) {
          console.log(err);
        })
      },
      //获取分区信息
      getAreaData(){
        let that = this;
        that.$http.get('/newapi/Area/getAreaStreetDetail',{
          params:{
            id:that.$store.state.areaId
          }
        })
          .then(res=>{
            console.log(res);
            let areaData = res.data.res;
            that.upper_region = areaData.upper_region;
            that.sort = areaData.sort;
            that.title = areaData.title;
            console.log(that.title)
        }).catch(err=>{
          console.log(err)
        })
      },
      //关闭弹窗
      closeThisModal(){
        this.sort = '';
        this.title = '';
        this.HtranClose();
      },
    //   // 获取省列表
    //   getProList() {
    //     let that = this;
    //     that.$http.get('/newapi/Area/getAreaRegion', {
    //       params: {
    //         country_code: 'CN'
    //       }
    //     }).then(res => {
    //       that.proList = res.data.res;
    //     }).catch(err => {
    //       console.log(err
    //       )
    //     })
    //   },
    //   //获取城市
    //   getCityList(value) {
    //     // console.log(value);
    //     let that = this;
    //     that.cityList = [];
    //     that.cityData = '';
    //     that.areaList = [];
    //     that.upper_region = '';
    //     that.$http.get('/newapi/Area/getAreaRegion', {
    //       params: {
    //         country_code: 'CN',
    //         upper_region: value
    //       }
    //     }).then(res => {
    //       that.cityList = res.data.res
    //     }).catch(err => {
    //       console.log(err)
    //     })
    //   },
    //   //获取县区
    //   getAreaList(value) {
    //     let that = this;
    //     that.areaList = [];
    //     that.upper_region = '';
    //     that.$http.get('/newapi/Area/getAreaRegion', {
    //       params: {
    //         country_code: 'CN',
    //         upper_region: value
    //       }
    //     }).then(res => {
    //       that.areaList = res.data.res
    //     }).catch(err => {
    //       console.log(err)
    //     })
    //   }
    },
    // created() {
    //   this.getProList();
    // }

  }
</script>
<style scoped>
  .primary_link {
    text-align: center;
    width: 63%;
  }

  /*.btn button {*/
    /*width: 100px;*/
    /*background: #ed7d31;*/
    /*color: #fff;*/
    /*height: 35px;*/
    /*margin-left: 60%;*/
    /*border: none;*/
    /*border-radius: 5px;*/
  /*}*/

  .btn button:nth-child(2) {
    float: right;
  }

  .Htran-b-name {
    width: 30%;
    text-align: center;
    float: left;
    line-height: 27px;
  }

  .Htran-b-input {
    width: 70%;
    float: left;
  }



  .Htran-b-input input {
    border-radius: 5px;
    width: 100%;
    line-height: 27px;
    box-sizing: border-box;
    border: 1px solid #d3d3d3;
  }

  .li-p {
    width: 94%;
    float: left;
    padding: 0 18%;
    margin-top: 30px;
  }

  .Htran-b-li {
    margin-top: 10px;
    width: 100%;
    float: left;
  }

  .Htran-li {
    margin-top: 65px;
    width: 50%;
    float: left;
  }

  .Htran-input {
    width: 80%;
    float: left;
  }

  .Htran-input input {
    width: 100%;
    float: left;
    border: none;
    line-height: 27px;
    border-bottom: 1px solid #d3d3d3;
  }

  .Htran-tltle {
    width: 90%;
    margin-top: 20px;
    line-height: 27px;
    font-size: 1.1em;
    float: left;
    padding: 0 5%;
  }

  .Htran {
    width: 26%;
    height: 360px;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    position: absolute;
    top: 50%;
    margin-top: -180px;
    left: 37%;
    z-index: 10;
  }



  img:hover {
    background: #bd2c00 !important;
    color: #ffffff;
  }

  img{
    /*position: fixed;*/
    flex-star:40px;
    /*margin-left: 44%;*/
    position: relative;

  }
  img{
    left: 155%;
  }
  .rele-titles {
    width: 14.8%;
    padding: 0 1%;
    line-height: 50px;
    font-size: 2em;
    color: #000;
    background: #f5f5f7;
    position: fixed;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;
    padding-right: 200px;
  }
</style>
